<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>bootstrap-fileinput 文件上传示例 </title>

    <!-- Bootstrap -->
    <link href=.../../statics/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href=.../../statics/css/font-awesome.min.css" rel="stylesheet"> 
    <!-- bootstrap-fileinput -->
    <link href=.../../statics/plugins/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet"> 
    <link href=.../../statics/plugins/bootstrap-fileinput/themes/explorer/theme.min.css" rel="stylesheet"> 
	
	<!-- Custom Theme Style -->
    <link href=.../../statics/css/custom.css" rel="stylesheet"> 
  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
         
        <!-- page content -->
        <div class="framebody" role="main" >
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>bootstrap-fileinput 文件上传示例</h3>
              </div>
            </div>
            <div class="clearfix"></div>

            <div class="row">

              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_content">
 					<form class="form-horizontal form-label-left" enctype=" multipart/form-data">
 						<div class="item form-group" >
		                	<label class="control-label col-md-1" for="name">单文件上传：</label>
	                        <div class="col-md-4">
			                    <input id="file-1" type="file" class="file" data-min-file-count="1">
	                        </div>
		                </div>
		                <div class="item form-group">
		                	<label class="control-label col-md-1" for="name">多文件上传：</label>
	                        <div class="col-md-10">
			                    <input id="file-2" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1">
	                        </div>
		                </div>
		            </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->

        
      </div>
    </div>

    <!-- jQuery -->
    <script src=.../../statics/js/jquery.1.11.3.min.js"></script>
    <!-- Bootstrap -->
    <script src=.../../statics/js/bootstrap.min.js"></script>  
    <!-- bootstrap-fileinput -->
    <script src=.../../statics/plugins/bootstrap-fileinput/js/fileinput.min.js"></script> 
    <script src=.../../statics/plugins/bootstrap-fileinput/js/locales/zh.js"></script>  
    <script src=.../../statics/plugins/bootstrap-fileinput/themes/explorer/theme.min.js"></script>   
      
    <!-- Custom Theme Scripts -->
    <script src=.../../statics/js/custom.js"></script>
	
	<script type="text/javascript">
		$("#file-1").fileinput({
			language: 'zh',
			uploadUrl: '#',
	        //allowedFileExtensions: ['jpg', 'png', 'gif'],
	        allowedPreviewTypes : [ 'image' ],
	        slugCallback: function(filename) {
	            return filename.replace('(', '_').replace(']', '_');
	        }
	    });
		$("#file-2").fileinput({
			language: 'zh',
	        uploadUrl: '#', // you must set a valid URL here else you will get an error
	        allowedFileExtensions : ['jpg', 'png','gif'],
	        allowedPreviewTypes : [ 'image' ],
	        overwriteInitial: false,
	        maxFileSize: 1000,
	        maxFilesNum: 10,
	        slugCallback: function(filename) {
	            return filename.replace('(', '_').replace(']', '_');
	        }
		});
	</script>
	
  </body>
</html>